'use client'

import { useRef } from "react"
import Autoplay from "embla-carousel-autoplay"

import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel"

import { cn } from "@/lib/utils"

type SlideshowProps = {
    className?: string
}

const newsList = [
    { title: '新闻标题', subtitle: '具体新闻描述具体新闻描述具体新闻描述', image: '/images/7.2.1.jpg' },
    { title: '新闻标题', subtitle: '具体新闻描述具体新闻描述具体新闻描述', image: '/images/7.3.1.jpg' },
    { title: '新闻标题', subtitle: '具体新闻描述具体新闻描述具体新闻描述', image: '/images/7.4.1.jpg' },
    { title: '新闻标题', subtitle: '具体新闻描述具体新闻描述具体新闻描述', image: '/images/7.5.1.jpg' },
    { title: '新闻标题', subtitle: '具体新闻描述具体新闻描述具体新闻描述', image: '/images/7.6.1.jpg' },
]

const Slideshow = ({ className }: SlideshowProps) => {
    const plugin = useRef(Autoplay({ delay: 5000, stopOnInteraction: false }))

    return (
        <Carousel plugins={[plugin.current]} className={cn("w-full", className)}>
            <CarouselContent>
                {newsList.map((news, index) => (
                    <CarouselItem key={index}>
                        <div
                            className="bg-cover bg-no-repeat bg-center w-full h-48 md:h-96"
                            style={{ backgroundImage: `url(${news.image})` }}
                        >
                            <div className="p-6 flex flex-col justify-end h-full">
                                <h2 className="font-bold text-2xl text-primary">{news.title}</h2>
                                <p className="text-sm text-muted-foreground">{news.subtitle}</p>
                            </div>
                        </div>
                    </CarouselItem>
                ))}
            </CarouselContent>
        </Carousel>
    )
}

export default Slideshow